window.onload = function () {
    //雪花背景特效
    var timer=null;
    function Obj() {
        this.drow = function (o) {
            var speed = 0;
            var startLeft = Math.ceil(Math.random() * document.documentElement.clientWidth);
            o.style.opacity = (Math.ceil(Math.random() * 3) + 7) / 10;
            o.style.left = startLeft + "px";
            o.style.color = "#fff";
            o.style.fontSize = 12 + Math.ceil(Math.random() * 14) + "px";
            timer=setInterval(function () {
                if (speed < document.documentElement.clientHeight) {
                    o.style.top = speed + "px";
                    o.style.left = startLeft + Math.ceil(Math.random() * 8) + "px";
                    speed += 10;
                } else {
                    o.style.display = "none";
                }
            }, 400);
        }
    }
    setInterval(function () {
        var odiv = document.createElement("div");
        odiv.innerHTML = "❉";
        odiv.className = "xue";
        odiv.style.position = "fixed";
        document.body.appendChild(odiv);
        var obj = new Obj();
        obj.drow(odiv);
        var xue = document.getElementsByClassName("xue");
        for (var i = 0; i < xue.length; i++) {
            if (xue[i].style.display == "none") {
                clearInterval(timer);
                document.body.removeChild(xue[i]);
            }
        }
    }, 800);

    //更改主题颜色
    var body=document.getElementsByTagName("body")[0];
    var color=document.getElementById("color");
    var span=color.getElementsByTagName("span");
    console.log(body.style.background);
    for(var i=0;i<span.length;i++){
        span[i].onclick=function(){
            var bodyColor=document.defaultView.getComputedStyle(body, null).background;
            body.style.background=document.defaultView.getComputedStyle(this, null).background;
            this.style.background=bodyColor;
        }
    }

    // 日历
    var month_olympic = [31,29,31,30,31,30,31,31,30,31,30,31];
    var month_normal = [31,28,31,30,31,30,31,31,30,31,30,31];
    var month_name = ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"];
    var holder = document.getElementById("days");
    var prev = document.getElementById("prev");
    var next = document.getElementById("next");
    var ctitle = document.getElementById("calendar-title");
    var cyear = document.getElementById("calendar-year");
    var my_date = new Date();
    var my_year = my_date.getFullYear();
    var my_month = my_date.getMonth();
    var my_day = my_date.getDate();
    //获取某年某月第一天是星期几
    function dayStart(month, year) {
        var tmpDate = new Date(year, month, 1);
        return (tmpDate.getDay());
    }
    //计算某年是不是闰年并返回当前年某月有多少天
    function daysMonth(month, year) {
        if (year%4==0 && year%100!=0 || year%400==0) {
            return (month_olympic[month]);
        } else {
            return (month_normal[month]);
        }
    }
    function refreshDate(){
        var str = "";
        var totalDay = daysMonth(my_month, my_year); //获取该月总天数
        var firstDay = dayStart(my_month, my_year); //获取该月第一天是星期几
        var myclass;
        for(var i=1; i<firstDay; i++){ 
            str += "<li></li>"; //为起始日之前的日期创建空白节点
        }
        for(var i=1; i<=totalDay; i++){
            if((i<my_day && my_year==my_date.getFullYear() && my_month==my_date.getMonth()) || my_year<my_date.getFullYear() || ( my_year==my_date.getFullYear() && my_month<my_date.getMonth())){ 
                myclass = " class='lightgrey'"; //当该日期在今天之前时，以浅灰色字体显示
            }else if (i==my_day && my_year==my_date.getFullYear() && my_month==my_date.getMonth()){
                myclass = " class='green greenbox'"; //当天日期以绿色背景突出显示
            }else{
                myclass = " class='darkgrey'"; //当该日期在今天之后时，以深灰字体显示
            }
            str += "<li"+myclass+">"+i+"</li>"; //创建日期节点
        }
        holder.innerHTML = str; //设置日期显示
        ctitle.innerHTML = month_name[my_month]; //设置月份显示
        cyear.innerHTML = my_year; //设置年份显示
    }
    refreshDate(); //执行该函数
    prev.onclick = function(e){
        e.preventDefault();
        my_month--;
        if(my_month<0){
            my_year--;
            my_month = 11;
        }
        refreshDate();
    }
    next.onclick = function(e){
        e.preventDefault();
        my_month++;
        if(my_month>11){
            my_year++;
            my_month = 0;
        }
        refreshDate();
    }


    //导航切换
    var home=document.getElementById("home");
    var introduce=document.getElementById("introduce");
    var works=document.getElementById("works");
    var photos=document.getElementById("photos");
    var left=document.getElementsByClassName("left")[0];
    var left2=document.getElementsByClassName("left2")[0];
    var left3=document.getElementsByClassName("left3")[0];
    var left4=document.getElementsByClassName("left4")[0];
    home.onclick=function(){
        left.style.display="block";
        left2.style.display="none";
        left3.style.display="none";
        left4.style.display="none";
    }
    introduce.onclick=function(){
        left.style.display="none";
        left3.style.display="none";
        left4.style.display="none";
        left2.style.display="block";
    }
    works.onclick=function(){
        left3.style.display="block";
        left.style.display="none";
        left2.style.display="none";
        left4.style.display="none";
    }
    photos.onclick=function(){
        left4.style.display="block";
        left.style.display="none";
        left2.style.display="none";
        left3.style.display="none";
    }

    //介绍页个人资料tab切换
    var tabli=document.getElementsByClassName("tab-item");
    var pdiv=document.getElementsByClassName("main");
    for(var i=0;i<tabli.length;i++){
        tabli[i].index=i;
        tabli[i].onclick=function(){
            for(var j=0;j<tabli.length;j++){
                tabli[j].className="tab-item"
                pdiv[j].className="main";
            }
            this.className="tab-item active";
            pdiv[this.index].className="main selected";
        }
    }


    //轮播图
    var inner=document.getElementsByClassName("inner")[0];
    var ul=inner.getElementsByTagName("ul")[0];
    var liArr=ul.children;
    var number=document.getElementsByClassName("number")[0];
    var nliArr=number.getElementsByTagName("li");
    var span_btn=document.getElementsByClassName("span_btn")[0];
    var btnArr=span_btn.children;
    var num=0;
    var colLi=liArr[0].cloneNode(true);
    ul.appendChild(colLi);
    var key=0;
    var timer1=null;
    for(var i=0;i<liArr.length-1;i++){
        var li=document.createElement("li");
        number.appendChild(li);
    }
    nliArr[0].className="current";
    inner.onmouseover=function(){
        span_btn.style.display="block";
    }
    inner.onmouseout=function(){
        span_btn.style.display="none";
    }
    for(var i=0;i<nliArr.length;i++){
        nliArr[i].index=i;
        nliArr[i].onmouseover=function(){
            for(var j=0;j<nliArr.length;j++){
                nliArr[j].className="";
            }
            this.className="current";
            num=this.index;
            key=this.index;
            animate(ul,-this.index*inner.offsetWidth);
        }
    }
    btnArr[0].onclick=function(){
        num--;
        key--;
        if(num<0){
            ul.style.left=-(nliArr.length)*inner.offsetWidth+"px";
            num=nliArr.length-1;
        }
        if(key<0){
            key=nliArr.length-1;
        }
        for(var j=0;j<nliArr.length;j++){
            nliArr[j].className="";
        }
        nliArr[key].className="current";
        animate(ul,-num*inner.offsetWidth);
    }
    btnArr[1].onclick=function (){
        num++;
        key++;
        if(num>nliArr.length){
            ul.style.left=-(nliArr.length)*inner.offsetWidth+"px";
            ul.style.left=-0+"px";
            num=1;
        }
        if(key>nliArr.length-1){
            key=0;
        }
        for(var j=0;j<nliArr.length;j++){
            nliArr[j].className="";
        }
        nliArr[key].className="current";
        animate(ul,-num*inner.offsetWidth);
    }
    function animate(ele,target){
        clearInterval(ele.timer);
        ele.timer=setInterval(function(){
            var  step=(target-ele.offsetLeft)>0?20:-20;
            if(Math.abs(target-ele.offsetLeft)<Math.abs(step)){
                ele.style.left=target+"px";
                clearInterval(ele.timer);
            }else{
                ele.style.left=ele.offsetLeft+step+"px";
            }
        },10);
    }
    function lb(){
        timer1=setInterval(function (){
            num++;
            key++;
            if(num>nliArr.length){
                ul.style.left=-(nliArr.length)*inner.offsetWidth+"px";
                ul.style.left=-0+"px";
                num=1;
            }
            if(key>nliArr.length-1){
                key=0;
            }
            for(var j=0;j<nliArr.length;j++){
                nliArr[j].className="";
            }
            nliArr[key].className="current";
            animate(ul,-num*inner.offsetWidth);
        },3000);
    }
    lb();
    inner.onmouseenter=function(){
        clearInterval(timer1);
    }
    inner.onmouseleave=function(){
        lb();
    }


    //看板娘
    L2Dwidget.init({
        "display": {
            "position": "right", // 定位位置（"left"/"right"/"top"/"bottom"）
            "width": 75, // 宽度
            "height": 150, // 高度
            "hOffset": 0,
            "vOffset": 20
        },
        "mobile": {
            "show": true,
            "scale": 0.5
        },
        "react": {
            "opacityDefault": 1, // 透明度
            "opacityOnHover": 0.2
        },
        "dialog": {
            enable: true,
            script: {
                'tap body': '2',
                'tap face': '3',
            }
        }
    });

}

